تحسين أداء JavaScript: تقسيم الكود مقابل التقييم الكسول

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      جارٍ التحميل...
}>
        
      
    

في هذا المثال، يتم تحميل OtherComponent فقط عند عرضه. أثناء تحميله، سيرى المستخدم رسالة "جارٍ التحميل...".

أدوات تقسيم الكود

• Webpack: مُجمِّع وحدات شائع يدعم تقنيات تقسيم الكود المختلفة.
• Rollup: مُجمِّع وحدات آخر يركز على إنشاء حزم صغيرة وفعالة.
• Parcel: مُجمِّع لا يتطلب أي تكوين ويتعامل مع تقسيم الكود تلقائيًا.
• Vite: أداة بناء تستفيد من وحدات ES الأصلية للتطوير السريع والبنيات المحسّنة للإنتاج.

التقييم الكسول: تأجيل الحساب

ما هو التقييم الكسول؟

التقييم الكسول، المعروف أيضًا بالتقييم المؤجل، هو تقنية برمجية يتم فيها تأخير تقييم التعبير حتى تكون قيمته مطلوبة بالفعل. بعبارة أخرى، يتم إجراء الحسابات فقط عندما تكون نتائجها مطلوبة، بدلاً من حسابها بشغف مقدمًا.

تخيل أنك تحضر وجبة متعددة الأطباق. لن تطبخ كل طبق دفعة واحدة. بدلاً من ذلك، ستحضر كل طبق فقط عندما يحين وقت تقديمه. يعمل التقييم الكسول بشكل مشابه، حيث يجري الحسابات فقط عندما تكون نتائجها مطلوبة.

كيف يعمل التقييم الكسول

في JavaScript، يمكن تنفيذ التقييم الكسول باستخدام تقنيات مختلفة:

• الدوال: يتيح لك تغليف تعبير في دالة تأجيل تقييمه حتى يتم استدعاء الدالة.
• المولدات (Generators): توفر المولدات طريقة لإنشاء مكررات تنتج قيمًا عند الطلب.
• التخزين المؤقت للنتائج (Memoization): يتضمن التخزين المؤقت للنتائج تخزين نتائج استدعاءات الدوال المكلفة وإرجاع النتيجة المخزنة مؤقتًا عند حدوث نفس المدخلات مرة أخرى.
• الوكلاء (Proxies): يمكن استخدام الوكلاء لاعتراض الوصول إلى الخصائص وتأجيل حساب قيم الخصائص حتى يتم الوصول إليها بالفعل.

فوائد التقييم الكسول

• تحسين الأداء: من خلال تأجيل الحسابات غير الضرورية، يمكن للتقييم الكسول تحسين الأداء بشكل كبير، خاصة عند التعامل مع مجموعات بيانات كبيرة أو حسابات معقدة.
• تقليل استخدام الذاكرة: يمكن للتقييم الكسول تقليل استخدام الذاكرة عن طريق تجنب إنشاء قيم وسيطة ليست هناك حاجة إليها على الفور.
• زيادة الاستجابة: من خلال تجنب الحسابات غير الضرورية أثناء التحميل الأولي، يمكن للتقييم الكسول زيادة استجابة التطبيق.
• هياكل البيانات اللانهائية: يتيح لك التقييم الكسول العمل مع هياكل البيانات اللانهائية، مثل القوائم أو التدفقات اللانهائية، عن طريق حساب العناصر الضرورية فقط عند الطلب.

مثال: التحميل الكسول للصور

حالة استخدام شائعة للتقييم الكسول هي التحميل الكسول للصور. بدلاً من تحميل جميع الصور على الصفحة مقدمًا، يمكنك تأجيل تحميل الصور التي لا تظهر في البداية في منفذ العرض. يمكن أن يؤدي ذلك إلى تحسين وقت تحميل الصفحة الأولي بشكل كبير وتقليل استهلاك عرض النطاق الترددي للشبكة.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

يستخدم هذا المثال واجهة برمجة تطبيقات IntersectionObserver لاكتشاف متى تدخل الصورة في منفذ العرض. عندما تكون الصورة مرئية، يتم تعيين خاصية src الخاصة بها إلى قيمة خاصية data-src، مما يؤدي إلى تحميل الصورة. ثم يقوم المراقب بإلغاء مراقبة الصورة لمنع تحميلها مرة أخرى.

مثال: التخزين المؤقت للنتائج (Memoization)

يمكن استخدام التخزين المؤقت للنتائج لتحسين استدعاءات الدوال المكلفة. إليك مثال:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // محاكاة عملية حسابية تستغرق وقتاً طويلاً
  for (let i = 0; i < 100000000; i++) {
    // افعل شيئًا ما
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('First call');
console.log(memoizedCalculation(5)); // الاستدعاء الأول - يستغرق وقتاً
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedCalculation(5)); // الاستدعاء الثاني - يعيد القيمة المخزنة فوراً
console.timeEnd('Second call');

في هذا المثال، تأخذ دالة memoize دالة كمدخل وتعيد نسخة مخزنة مؤقتًا من تلك الدالة. تقوم الدالة المخزنة مؤقتًا بتخزين نتائج الاستدعاءات السابقة، بحيث يمكن للاستدعاءات اللاحقة بنفس الوسائط إرجاع النتيجة المخزنة دون إعادة تنفيذ الدالة الأصلية.

تقسيم الكود مقابل التقييم الكسول: الفروق الرئيسية

بينما يعتبر كل من تقسيم الكود والتقييم الكسول تقنيات تحسين قوية، فإنهما يعالجان جوانب مختلفة من الأداء:

• تقسيم الكود: يركز على تقليل حجم الحزمة الأولية عن طريق تقسيم الكود إلى أجزاء أصغر وتحميلها عند الطلب. يستخدم بشكل أساسي لتحسين وقت تحميل الصفحة الأولي.
• التقييم الكسول: يركز على تأجيل حساب القيم حتى تكون هناك حاجة إليها بالفعل. يستخدم بشكل أساسي لتحسين الأداء عند التعامل مع الحسابات المكلفة أو مجموعات البيانات الكبيرة.

في جوهره، يقلل تقسيم الكود من كمية الكود التي يجب تنزيلها مقدمًا، بينما يقلل التقييم الكسول من كمية الحسابات التي يجب إجراؤها مقدمًا.

متى تستخدم تقسيم الكود مقابل التقييم الكسول

تقسيم الكود

• التطبيقات الكبيرة: استخدم تقسيم الكود للتطبيقات التي تحتوي على كمية كبيرة من كود JavaScript، خاصة تلك التي بها مسارات أو ميزات متعددة.
• تحسين وقت التحميل الأولي: استخدم تقسيم الكود لتحسين وقت تحميل الصفحة الأولي وتقليل الوقت حتى تصبح تفاعلية.
• تقليل استهلاك عرض النطاق الترددي للشبكة: استخدم تقسيم الكود لتقليل كمية البيانات التي يجب نقلها عبر الشبكة.

التقييم الكسول

• الحسابات المكلفة: استخدم التقييم الكسول للدوال التي تقوم بحسابات مكلفة أو تصل إلى مجموعات بيانات كبيرة.
• تحسين الاستجابة: استخدم التقييم الكسول لتحسين استجابة التطبيق عن طريق تأجيل الحسابات غير الضرورية أثناء التحميل الأولي.
• هياكل البيانات اللانهائية: استخدم التقييم الكسول عند العمل مع هياكل البيانات اللانهائية، مثل القوائم أو التدفقات اللانهائية.
• التحميل الكسول للوسائط: طبق التحميل الكسول للصور ومقاطع الفيديو وأصول الوسائط الأخرى لتحسين أوقات تحميل الصفحة.

الجمع بين تقسيم الكود والتقييم الكسول

في كثير من الحالات، يمكن الجمع بين تقسيم الكود والتقييم الكسول لتحقيق مكاسب أداء أكبر. على سبيل المثال، يمكنك استخدام تقسيم الكود لتقسيم تطبيقك إلى أجزاء أصغر ثم استخدام التقييم الكسول لتأجيل حساب القيم داخل تلك الأجزاء.

فكر في تطبيق للتجارة الإلكترونية. يمكنك استخدام تقسيم الكود لتقسيم التطبيق إلى حزم منفصلة لصفحة قائمة المنتجات، وصفحة تفاصيل المنتج، وصفحة الدفع. بعد ذلك، داخل صفحة تفاصيل المنتج، يمكنك استخدام التقييم الكسول لتأجيل تحميل الصور أو حساب توصيات المنتج حتى تكون هناك حاجة إليها بالفعل.

ما بعد تقسيم الكود والتقييم الكسول: تقنيات تحسين إضافية

بينما يعد تقسيم الكود والتقييم الكسول تقنيات قوية، إلا أنهما مجرد قطعتين من اللغز عندما يتعلق الأمر بتحسين أداء JavaScript. إليك بعض التقنيات الإضافية التي يمكنك استخدامها لتحسين الأداء بشكل أكبر:

• التصغير (Minification): إزالة الأحرف غير الضرورية (مثل المسافات البيضاء والتعليقات) من الكود لتقليل حجمه.
• الضغط (Compression): ضغط الكود باستخدام أدوات مثل Gzip أو Brotli لتقليل حجمه بشكل أكبر.
• التخزين المؤقت (Caching): الاستفادة من التخزين المؤقت للمتصفح والتخزين المؤقت لشبكة توصيل المحتوى (CDN) لتقليل عدد الطلبات إلى الخادم الخاص بك.
• التخلص من الكود غير المستخدم (Tree Shaking): إزالة الكود غير المستخدم من حزمك لتقليل حجمها.
• تحسين الصور: تحسين الصور عن طريق ضغطها، وتغيير حجمها إلى الأبعاد المناسبة، واستخدام تنسيقات الصور الحديثة مثل WebP.
• Debouncing و Throttling: التحكم في معدل تنفيذ معالجات الأحداث لمنع مشاكل الأداء.
• التعامل الفعال مع DOM: تقليل عمليات التلاعب بـ DOM واستخدام تقنيات فعالة للتعامل معه.
• Web Workers: تفريغ المهام الحسابية المكثفة إلى عمال الويب لمنعها من حظر الخيط الرئيسي.

الخاتمة

يعد تحسين أداء JavaScript جانبًا حاسمًا لتقديم تجربة مستخدم إيجابية وتحقيق أهداف العمل. تقسيم الكود و التقييم الكسول هما تقنيتان قويتان يمكنهما تحسين الأداء بشكل كبير عن طريق تقليل أوقات التحميل الأولية، وتقليل استهلاك عرض النطاق الترددي للشبكة، وتأجيل الحسابات غير الضرورية. من خلال فهم كيفية عمل هذه التقنيات ومتى تستخدمها، يمكنك إنشاء تطبيقات ويب أسرع وأكثر استجابة ومتعة.

تذكر أن تأخذ في الاعتبار متطلبات تطبيقك المحددة واستخدام التقنيات الأكثر ملاءمة لاحتياجاتك. راقب أداء تطبيقك باستمرار وكرر استراتيجيات التحسين الخاصة بك لضمان تقديم أفضل تجربة مستخدم ممكنة. احتضن قوة تقسيم الكود والتقييم الكسول لإنشاء تطبيقات ويب ليست غنية بالميزات فحسب، بل تتميز أيضًا بالأداء العالي والممتعة في الاستخدام، في جميع أنحاء العالم.

مصادر تعلم إضافية

• توثيق Webpack: https://webpack.js.org/
• توثيق Rollup: https://rollupjs.org/guide/en/
• توثيق Vite: https://vitejs.dev/
• MDN Web Docs - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - تحسين تنفيذ JavaScript: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/